<template>
  <div class="userPanel">
    <el-container>
      <el-header>
        <h2>用户面板</h2>
      </el-header>
      <el-container>
        <!-- 信息卡片 -->
        <el-aside width="420px">
          <el-card class="box-card" style="margin: 10px; height: 280px;">
            <div class="myInfo">
              <img src="">
              <div style="font-size: 20px;">
                <span v-show="appList2.realName">{{ appList2.realName }}</span>
              </div>
              <div>
                <span v-show="appList2.occupationName">{{ appList2.occupationName }}</span>
              </div>
            </div>
            <hr>
            <div class="item">
              我的信息
              <span style="color: #5ba8ff;">5</span>
            </div>
            <hr>
            <div class="item">
              我的邮件
              <span style="color: #5ba8ff;">0</span>
            </div>
            <hr>
            <el-button type="text" @click="dialogFormVisible = true" icon="el-icon-edit">写便签</el-button>
            <!-- 便签内容 -->
            <el-dialog width="400px" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item :label-width="formLabelWidth">
                  <el-input v-model="form.name" auto-complete="off" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth">
                  <el-input 
                    type="textarea" 
                    v-model="form.textarea" 
                    placeholder="便签内容(不能为空)"
                    style="width: 345px;height: 50px;" 
                    ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible=false;saveContent()">确 定</el-button>
              </div>
            </el-dialog>
          </el-card>
          <el-card class="box-card" style="margin: 10px; height: 280px;">
            <ul class="app-list2">
              <li v-for="(means,index) in appList2" class="means-item">
                <div class="item2">
                  基本资料
                </div>
                <hr>
                <div class="item2">
                  <div class="el-icon-tickets">学历</div><br>
                  <span v-show="appList2.graduateSchool">{{appList2.graduateSchool}}</span>
                  <span v-show="appList2.degree"> {{ appList2.degree }}</span>
                </div>
                <hr>
                <div class="item2">
                  <div class="el-icon-mobile-phone">手机</div><br>
                  <!-- <span>{{means.phoneNum}}&nbsp;</span> -->
                  <span v-show="appList2.phoneNum">&nbsp;{{ appList2.phoneNum }}</span>
                </div>
                <hr>
                <div class="item2">
                  <div class="el-icon-location">地址</div><br>
                  <span v-show="appList2.address">{{ appList2.address }}&nbsp;</span>
                </div>
                <hr>
                <div class="item2">
                  <div class="el-icon-edit">签名</div><br>
                  <span v-show="appList2.signName">{{appList2.signName}}&nbsp;</span>
                </div>
                <hr>
              </li>
            </ul>
          </el-card>
        </el-aside>
        <el-main>
          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
            <!-- 我的标签 -->
            <el-tab-pane label="用户管理" name="first">
              <div class="allNote">
                <ul class="app-list">
                  <li v-for="(item, index) in appList" :key="item.id"
                    class="app-item">
                    <div class="noteContent">
                      <div class="noteLeft">
                        <div style="color: #5ba8ff;">{{ item.tital }}</div>
                        <div><span>{{ item.time }}</span>
                        </div>
                        <div>{{ item.content }}</div>
                        <div class="el-icon-star-off" style="color:red"></div>
                      </div>
                      <div class="noteRight">
                        <button @click="deleteLi(index)">x</button><br>
                        <button type="text"
                          @click="dialogFormVisible2 = true; editContent(index)"
                          icon="el-icon-edit">修改</button>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <!-- 分页 -->
              <div class="block">
                <el-Pagination :total="total" :pageSize="pageSize"
                  @getPagination="getPagination"></el-Pagination>
              </div>
              <!-- 修改拟态框 -->
              <el-dialog width="400px" :visible.sync="dialogFormVisible2">
                <el-form :model="form2">
                  <el-form-item :label-width="formLabelWidth">
                    <el-input v-model="form2.name2" auto-complete="off"
                      placeholder="标题"></el-input>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form2.textarea2"
                      placeholder="便签内容" style="width: 345px;height: 50px;"
                      value=""></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary"
                    @click="dialogFormVisible2 = false; syncContent()">确
                    定</el-button>
                </div>
              </el-dialog>
            </el-tab-pane>

            <!-- 个人设置 -->
            <el-tab-pane label="配置管理" name="second">
              <el-form class="editForm">
                <el-form-item>
                  <div class="one">
                    <div class="oneLeft">
                      <span class="noeCon">用户名</span>
                      <input v-model="editForm.username">
                    </div>
                    <div class="oneLeft">
                      <span class="noeCon">电话</span>
                      <input v-model="editForm.phoneNum">
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="one">
                    <div class="oneLeft">
                      <div class="noeCon">真实姓名</div>
                      <input v-model="editForm.realName">
                    </div>
                    <div class="oneLeft">
                      <div class="noeCon">昵称</div>
                      <input v-model="editForm.nickname">
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="one">
                    <div class="oneLeft">
                      <div class="noeCon">Email</div>
                      <input v-model="editForm.email">
                    </div>
                    <div class="oneLeft">
                      <div class="noeCon">地址</div>
                      <input v-model="editForm.address">
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="one">
                    <div class="oneLeft">
                      <div class="noeCon">学历</div>
                      <input v-model="editForm.degree">
                    </div>
                    <div class="oneLeft">
                      <div class="noeCon">毕业院校</div>
                      <input v-model="editForm.graduateSchool">
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="one">
                    <div class="oneLeft">
                      <div class="noeCon">身份证号</div>
                      <input v-model="editForm.identityNum">
                    </div>
                    <div class="oneLeft">
                      <div class="noeCon">银行账号</div>
                      <input v-model="editForm.bankAcount">
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="one">
                    <div class="oneLeft">
                      <div class="noeCon">性别</div>
                      <select v-model="editForm.sex">
                        <option label="男" value="1"></option>
                        <option label="女" value="0"></option>
                      </select>
                    </div>
                    <div class="oneLeft">
                      <div class="noeCon">皮肤</div>
                      <select>
                        <option>商务黄</option>
                        <option>青草绿</option>
                        <option>中国红</option>
                      </select>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="one">
                    <div class="oneLeft">
                      <div class="noeCon">生日</div>
                      <input v-model="editForm.birthday">
                    </div>
                    <div class="oneLeft">
                      <div class="noeCon">签名</div>
                      <input>
                    </div>
                  </div>
                </el-form-item>
                <br>
                <hr>
                <br>
                <el-form-item>
                  <div class="one">
                    <div class="oneLeft">
                      <div class="noeCon">新的密码</div>
                      <input v-model="newPassword">
                    </div>
                    <div class="oneLeft">
                      <div class="noeCon">确认密码</div>
                      <input v-model="editForm.password" @blur="confirmPassword">
                    </div>
                  </div>
                </el-form-item>
                <br>
                <hr>
                <br>
                <!-- 上传头像 -->
                <el-form-item>
                  <div class="perButton">
                    <div class="noeCon">头像</div>
                    <el-upload class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview" :on-remove="handleRemove"
                      list-type="picture">
                      <el-button size="small" type="primary"
                        icon="el-icon-picture"
                        style="color: #1e1e1e;background-color: #f4f4f4;border:1px solid #d2d6de;width: 100px;">上传头像</el-button>
                      <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 60px;margin-left: 10px;"
                    @click="replaceForm">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>





export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      editIndex: null,
      //便签内容
      appList: [
        {
          id: 1,
          time: '2022/2/23',
          tital: '',
          content: '今天开会内容是有关医院设备更新'
        },
        {
          id: 2,
          time: '2022/2/21',
          tital: '反映',
          content: '今天员工反映医院食堂菜品不丰富'
        }
      ],
      appList2: [],
      // 显示的基本资料
      appList2:
      {
        school: '哈佛大学',
        recSchool: '本科',
        phoneNum: 188888,
        address: '四川省成都市',
        signName: '万般皆下品'
      }
      ,
      //

      // form表单
      newPassword: '',
      editForm: {
        "address": "string",
        "bankAcount": "string",
        "birthday": "string",
        "color": 0,
        "colorName": "string",
        "createTime": "string",
        "degree": "string",
        "departmentId": 0,
        "departmentName": "string",
        "email": "string",
        "graduateSchool": "string",
        "id": 0,
        "identityNum": "string",
        "img": "string",
        "isDeleted": 0,
        "isUpdatePwd": 0,
        "joinTime": "string",
        "nickname": "string",
        "occupationId": 0,
        "occupationName": "string",
        "password": "string",
        "phoneNum": "string",
        "realName": "string",
        "roleId": 0,
        "roleName": "string",
        "salary": 0,
        "salt": "string",
        "sex": 0,
        "status": 0,
        "updateTime": "string",
        "username": "string"
      },
      //内容量共有几条
      total: 0,
      currentPage: 1,
      pageSize: 10,

      textarea: '',
      //
      userID:'',
      activeName2: 'first',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        name: '',
        textarea: ''
      },
      form2: {
        name2: '',
        textarea2: ''
      },
      formLabelWidth: '10px'
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
   this.userID=sessionStorage.getItem('userID')
    this.$axios({
      method:"get",
      url:"/userManagement/user/findUserById?id="+this.userID,
    }).then(resp=>{
      console.log('===============')
      // console.log(resp.data.data.id)
      this.appList2=resp.data.data
       console.log(resp.data.data)
       this.editForm={...resp.data.data}
      
    })
  },
  methods: {
    handleRemove() {
      console.log(file, fileList);
    },
    handlePreview() {
      console.log(file);
    },
    //头部点击
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //删除标签
    deleteLi(index) {
      this.appList.splice(index, 1);
    },
    //分页
    getPagination(page) {
      this.currentPage = page;
      this.getSupperList(this.currentPage, this.pageSize);
    },
    //添加标签
    saveContent() {
      this.startTime = this.getNowDate()
      // console.log(this.form,this.startTime)
      const appListObj = {
        tital: this.form.name,
        time: this.startTime,
        content: this.form.textarea,

      }
      if (this.form.textarea != '') {
        this.appList.unshift(appListObj)
      } else {
        dialogFormVisible = false
      }

    },
    //获取当前时间
    getNowDate() {
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      let day = timeOne.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      const NOW_MONTHS_AGO = `${year}-${month}-${day}`
      return NOW_MONTHS_AGO
    },

    // 修改按钮
    editContent() {

    },
    //确认修改
    syncContent() {


    },
    // 提交表单后替换基本资料
    replaceForm() {
      this.editForm.id=sessionStorage.getItem('userID')
      console.log(this.editForm.id);
      this.$axios({
        method:'post',
        url:'/userManagement/user/updateUser',
        data:this.editForm
      }).then(resp=>{
        console.log(resp);
        if(resp.data.code==200){
          this.$message.success('修改成功')
        }
      })
    },
    //确认密码
    confirmPassword() {
      if (this.editForm.password != this.newPassword) {
        this.$message.error('前后密码不一致，请重新输入')
        this.editForm.password = ''
      }
    }
  },

};
</script>
<style scoped lang="less">
h2 {
  margin: 15px;

}

.el-card {
  border-top: solid 3px #34a8ff
}

.item {
  margin-bottom: 18px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
}

.item2 {
  margin-bottom: 18px;
  font-size: 14px;
}

.item2 div {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}

.item2 span {
  font-weight: 300;
}

.el-button {
  width: 360px;
  color: #fff;
  background-color: #34a8ff;
}

img {
  width: 60px;
  border-radius: 50px;
}

.myInfo {
  width: 400px;
  text-align: center;

}

.myInfo div {
  margin: 10px;
}

.el-main {
  height: auto;
  width: auto;
  margin: 8px;
  padding: 0;
  background-color: #fff;

}

.buttonTop {
  border-bottom-color: #1e1e1e
}

.buttonTop button {
  margin: 5px;
  width: 80px;
  color: #1e1e1e;
  background-color: #fff;
  border: none;
  font-weight: 700;
  font-size: 16px;
  border-radius: 5px;

}

button:hover {
  cursor: pointer;
}

.block {
  display: flex;
  margin-left: 5px;
  margin-top: 10px;
}

.noteContent {
  border: 1px solid #f8f8c8;
  background-color: #ffffe0;
  margin: 3px 10px;
  display: flex;
  align-content: center;
  justify-content: space-between;
}

/* .noteContent button{
  background-color: #ffffe0;
} */
.noteLeft {
  margin: 20px 5px;
}

.noteLeft div {
  margin-top: 10px;
}

.noteRight {
  margin: 15px 5px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  font-size: large;
}

.noteRight button {
  background-color: #ffffe0;
  border: none;

}

/* .block {
  
} */

form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 4px;
}

.el-form {
  /deep/.el-form-item__content {
    line-height: 20px;
  }
}

.one {

  width: 100%;
  display: flex;
  justify-content: space-between;
}

.oneLeft {
  width: 50%;
  margin: 0px 10px;
}

.oneLeft input {
  width: 96%;
  border: solid 1px #d2d6de;
  height: 17px;
  border-radius: 3px;
}

.oneLeft select {
  margin: -2;
  width: 96%;
  border: solid 1px #d2d6de;
  font-size: 17px;
  border-radius: 3px;

}

.noeCon {
  font-weight: 700;
}

.perButton {
  margin: 8px 10px;
}
</style>